import {Row, Col, Button, Space, Table} from 'antd'
import React, {useEffect, useState} from 'react'
import type {UploadFile} from 'antd/es/upload/interface'
import {history} from 'umi'
import {scrollToAnchor} from '@/utils'
import Info from '../child/info'
import TableInfo from '../child/tableInfo'
import page from '../../page.less'
import {accountsReceivableInfo} from '@/service/fiance/index'
import {getPublicDownloadUrl} from '@/service/common/upload'

function Details(props: any) {
	const userID = props
	const {
		query: {id},
	} = userID.location
	const [info, setInfo] = useState<any>({
		plateNo: '',
		refundNo: '',
		driverName: '',
		companyName: '',
		refundTypename: '',
		rentTypename: '',
		logListDtoList: [],
		flowList: [
			{transactionNo: '', paidMethodsname: '', remark: '', urlList: []},
		],
		refundStatusname: '',
	})
	const returnableInfo = [
		{label: '车牌号', value: info?.plateNo},
		{label: '应退单号', value: info?.refundNo},
		{label: '司机名称', value: info?.driverName},
		{label: '所属公司', value: info?.companyName},
		{label: '退款类型', value: info?.refundTypename},
		{label: '租赁类型', value: info?.rentTypename},
	] // 应退单信息
	const [deductionColumnsList, setDeductionColumnsList] = useState<any>([]) // 扣款费用数据
	const [freeColumnsList, setFreeColumnsList] = useState<any>([]) // 减免费用数据
	const [deductionColumns, setDeductionColumns] = useState<any>([]) // 扣款费用
	const [freeColumns, setFreeColumns] = useState<any>([]) // 收款费用
	const [expenseDetails, setExpenseDetails] = useState(0) // 费用明细总和
	const [expenseStatus, setExpenseStatus] = useState('') // 费用明细显示文字状态
	const recordColumns = [
		{title: '操作人', dataIndex: 'logPersonname'},
		{title: '操作内容', dataIndex: 'logRemark'},
		{title: '操作时间', dataIndex: 'logTime'},
	] // 操作记录
	const [fileList, setFileList] = useState<UploadFile[]>([])

	useEffect(() => {
		accountsReceivableInfo({id}).then((infoArr: any) => {
			if (infoArr?.success) {
				setInfo(infoArr?.data)
				const list1: any[] = []
				const list2: any[] = []
				const list5: any[] = []
				const list6: any[] = []
				let num1 = 0
				let num2 = 0
				let option1 = {}
				let option2 = {}
				infoArr?.data?.orderSettlementFeeList?.forEach((res: any) => {
					if (res.feeType === 1) {
						res[res.feeItemName] = res.feeItemAmount
						option1 = {...option1, ...res}
						list5.push(res)
						num1 += Number(res?.feeItemAmount)
					} else {
						res[res.feeItemName] = res.feeItemAmount
						option2 = {...option2, ...res}
						list6.push(res)
						num2 += Number(res?.feeItemAmount)
					}
				})
				const obj = {
					合计: num1?.toFixed(2),
				}
				const obj1 = {
					合计: num2?.toFixed(2),
				}
				option1 = {...option1, ...obj}
				option2 = {...option2, ...obj1}
				list1.push(option1)
				list2.push(option2)
				if (num1 - num2 > 0) {
					setExpenseDetails(num1 - num2)
					setExpenseStatus('需要客户补缴金额/元')
				} else {
					setExpenseDetails(num2 - num1)
					setExpenseStatus('需要退还客户金额/元')
				}
				setDeductionColumnsList(list1)
				setFreeColumnsList(list2)
				const list3: any[] = []
				const list4: any[] = []
				list5?.forEach((child: any) => {
					const obb = {
						title: child?.feeItemName,
						dataIndex: child?.feeItemName,
					}
					list3.push(obb)
				})
				const obj2 = {
					title: '合计',
					dataIndex: '合计',
				}
				list3.push(obj2)
				setDeductionColumns(list3)
				list6?.forEach((child1: any) => {
					const ojj = {
						title: child1?.feeItemName,
						dataIndex: child1?.feeItemName,
					}
					list4.push(ojj)
				})
				list4.push(obj2)
				setFreeColumns(list4)
			}
		})
	}, [])
	useEffect(() => {
		if (info?.flowList?.length > 0) {
			if (info?.flowList[0]?.urlList?.length > 0) {
				getPublicDownloadUrl(info?.flowList[0]?.urlList).then(
					(res: any) => {
						setFileList(res?.data)
					},
				)
			}
		}
	}, [info])
	return (
		<div className={page.page}>
			<Row style={{marginBottom: '15px'}}>
				<Space>
					<Button
						onClick={() => {
							scrollToAnchor('basic')
						}}>
						退款详情
					</Button>
					{info?.logListDtoList?.length > 0 && (
						<Button
							onClick={() => {
								scrollToAnchor('operationRecord')
							}}>
							操作记录
						</Button>
					)}
				</Space>
			</Row>

			<Info
				title="应退单信息"
				info={returnableInfo}
				span={8}
				state={{label: '退款状态', value: info?.refundStatusname}}
			/>
			{info?.orderSettlementFeeList?.length > 0 && (
				<TableInfo
					state={{label: expenseStatus, value: expenseDetails}}
					columns={deductionColumns}
					title="费用明细"
					tableTitle="扣款费用项"
					pagination={false}
					dataSource={deductionColumnsList}>
					<Table
						//  title={() => <span>减免费用项</span>}
						columns={freeColumns}
						pagination={false}
						dataSource={freeColumnsList}
					/>
				</TableInfo>
			)}

			{info?.flowList?.length > 0 && (
				<div className={`${page.page} ${page.card}`}>
					<div className={page.dotTitle}>已退账款</div>
					<Row gutter={24} className={page.rows}>
						<Col span={8} className={page.col}>
							<div className={page.label}>交易流水号：</div>
							<div className={page.value}>
								{info?.flowList
									? info?.flowList[0]?.transactionNo
									: ''}
							</div>
						</Col>
						<Col span={8} className={page.col}>
							<div className={page.label}>退款方式：</div>
							<div className={page.value}>
								{info?.flowList
									? info?.flowList[0]?.paidMethodsname
									: ''}
							</div>
						</Col>
						<Col span={24} className={page.col}>
							<div className={page.label}>备注：</div>
							<div className={page.value}>
								{info?.flowList
									? info?.flowList[0]?.remark
									: ''}
							</div>
						</Col>
						<Col span={24} className={page.col}>
							<div className={page.label}>附件：</div>
							<div className={page.value}>
								{fileList?.map((res: any) => (
									<a href={res.url} target="blank">
										{res.filename}
									</a>
								))}
							</div>
						</Col>
					</Row>
				</div>
			)}

			{info?.logListDtoList?.length > 0 && (
				<TableInfo
					id="operationRecord"
					title="操作记录"
					columns={recordColumns}
					dataSource={info?.logListDtoList}
				/>
			)}

			<div style={{display: 'flex', justifyContent: 'center'}}>
				<Button
					shape="round"
					onClick={(e) => {
						e.stopPropagation()
						history.goBack()
					}}>
					关闭
				</Button>
			</div>
		</div>
	)
}

export default Details
